<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单隐藏与显示</title>
    <script>
        function f1(a,b,c){
            let aChild = document.getElementById(a);
            let bChild = document.getElementById(b);
            let cChild = document.getElementById(c);

            // 当事件触发时存在两种场景
            // 1.当前列表处于隐藏状态
            if(aChild.style.display == "none"){
                // 将当前列表显示出来
                aChild.style.display = "block";
                // 将其他列表全部隐藏
                bChild.style.display = "none";
                cChild.style.display = "none";
            } else{
                // 2.当前列表处于显示状态
                // 此时其他列表一定是隐藏状态,只需要将当前列表隐藏即可
                aChild.style.display = "none";
            }
        }
    </script>
</head>
<body>
<h2 onclick="f1('u1','u2','u3')">水果</h2>
<ul style="display: none;" id="u1">
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>西瓜</li>
</ul>
<h2 onclick="f1('u2','u1','u3')">电子产品</h2>
<ul style="display: block;" id="u2">
    <li>手机</li>
    <li>手表</li>
    <li>平板</li>
</ul>
<h2 onclick="f1('u3','u2','u1')">家用电器</h2>
<ul style="display: none" id="u3">
    <li>电视</li>
    <li>冰箱</li>
    <li>空调</li>
</ul>
</body>
</html>